<script setup lang="ts">
import { ref, watch } from 'vue'

interface Props {
  data: any
  title?: string
  color?: 'green' | 'yellow' | 'blue' | 'orange'
  compare?: boolean
  compareText?: string
  type?: 'weapp' | 'monitor'
}

const props = withDefaults(defineProps<Props>(), {
  title: '统计数据',
  color: 'green',
  compare: false,
  compareText: '较昨日',
  type: 'weapp'
})

const bindColor = ref('#E8FAF3')

const initCss = () => {
  switch (props.color) {
    case 'green':
      bindColor.value = '#E8FAF3'
      break
    case 'yellow':
      bindColor.value = '#FFF8E5'
      break
    case 'blue':
      bindColor.value = '#E5F1FF'
      break
    case 'orange':
      bindColor.value = '#FFF2ED'
      break
    default:
      break
  }
}
initCss()

const showData = ref<any>(null)

watch(
  () => props.data,
  (newVal) => {
    if (newVal) {
      const tmp: any = {
        num: newVal.num,
        compare: `${Math.abs(newVal.compare)}`
      }
      if (newVal.compare > 0) {
        tmp.direction = 'up'
      }
      if (newVal.compare < 0) {
        tmp.direction = 'down'
      }
      showData.value = tmp
    }
  },
  {
    deep: true
  }
)
</script>

<template>
  <div class="stat-box-card">
    <div class="icon-container">
      <div :class="`icon ${props.color}${props.type === 'weapp' ? '' : '1'}`"></div>
    </div>
    <div class="content-container">
      <div class="title-box">{{ props.title }}</div>
      <div class="data-box">
        <div class="data-number">{{ showData?.num || '-' }}</div>
        <div v-if="props.compare && showData?.compare" class="compare-box">
          <span class="compare-text">{{ props.compareText }}</span>
          <span
            v-if="showData?.compare !== '0'"
            :class="{
              'compare-text': true,
              up: showData.direction === 'up',
              down: showData.direction === 'down'
            }"
            style="margin-top: 2px"
          >
            {{ showData.compare }}
          </span>
          <div
            :class="{
              'compare-icon': true,
              up: showData.direction === 'up',
              down: showData.direction === 'down'
            }"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.stat-box-card {
  @include rect(100%, 100%);
  @include flex(row, flex-start, center);
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 10px;
  padding: 20px;
  .icon-container {
    @include rect(56px, 56px);
    @include flex(row, center, center);
    border-radius: 10px;
    background: v-bind(bindColor);
    .icon {
      @include rect(24px, 24px);
      background-size: 100% 100%;
      &.green {
        background-image: url(./imgs/green.png);
      }
      &.yellow {
        background-image: url(./imgs/yellow.png);
      }
      &.blue {
        background-image: url(./imgs/blue.png);
      }
      &.orange {
        background-image: url(./imgs/orange.png);
      }
      &.green1 {
        background-image: url(./imgs/green1.png);
      }
      &.yellow1 {
        background-image: url(./imgs/yellow1.png);
      }
      &.blue1 {
        background-image: url(./imgs/blue1.png);
      }
      &.orange1 {
        background-image: url(./imgs/orange1.png);
      }
    }
  }
  .content-container {
    @include flex(column, space-between, flex-start);
    box-sizing: border-box;
    padding: 2px 0;
    height: 56px;
    margin-left: 10px;
    .title-box {
      font-family: 'PingFangSC-Regular';
      font-size: 13px;
      font-weight: 400;
      color: #7d7e82;
    }
    .data-box {
      @include flex(row, flex-start, center);
      .data-number {
        font-family: 'PingFangSC-Regular';
        font-size: 24px;
        font-weight: bold;
      }
      .compare-box {
        @include flex(row, flex-start, center);
        margin-top: 3px;
        margin-left: 8px;
        margin-top: 5px;
        .compare-text {
          font-family: 'PingFangSC-Regular';
          font-size: 12px;
          font-weight: 400;
          color: #a6a6a6;
          margin-left: 4px;
          &.down {
            color: #ff854d;
          }
          &.up {
            color: #17ce8a;
          }
        }
        .compare-icon {
          @include rect(12px, 12px);
          margin-left: 4px;
          margin-top: 2px;
          background-size: 100% 100%;
          background-image: url(./imgs/equal.png);
          &.down {
            background-image: url(./imgs/up.png);
          }
          &.up {
            background-image: url(./imgs/down.png);
          }
        }
      }
    }
  }
}
</style>
